<template>
    <div id="progress-loop" ref="chartDom" style="width: 100%;height: 100%"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import { countSize } from "@/utils/utils";
  import * as echarts from 'echarts';
import { Right } from '@element-plus/icons-vue';
  const props = defineProps({
    echartsPieData: {
      type: Array,
      default: [],
    },
    text:{
      type: String,
      default: '',
    }
  })
  watch(() => props.echartsPieData, (value) => {
    console.log('value',value)
    initChart();
  }, { deep: true });

  const chartDom = ref();
  let myChart = null;
    const Option = computed(() => {
      return {
        title: {
          text: props.text,
          textStyle: {
            //图例文字的样式
            fontSize: countSize(.14),
            color: "#fff",
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        legend: {
          right:'right',
          textStyle: {
                  fontSize: countSize(.14),
                  color: '#fff',
                  padding: [5, 0, 0, 2],
                  rich: {
                     a: {
                        verticalAlign: 'middle',
                     },
                  },
               },
          data: ['切籽直通率', '去核直通率', '整体直通率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show:true,
            lineStyle: {
              color: "#fff",
            },
          },
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
        },
        yAxis: {
          type: 'value',
          interval:10,
          min: 0,
          max: 100,
          splitLine: {
            show:false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show:true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            formatter: '{value} %',
            margin: 10,
            textStyle: {
              fontSize:  countSize(.14),
            },
          },
        },
        series: [
          {
            name: '切籽直通率',
            type: 'line',
            // stack: 'Total',
            data: [12, 13, 11, 14, 90, 23, 21,70,77]
          },
          {
            name: '去核直通率',
            type: 'line',
            // stack: 'Total',
            data: [20, 82, 11, 34, 20, 33, 31,78,82]
          },
          {
            name: '整体直通率',
            type: 'line',
            // stack: 'Total',
            data: [10, 22, 21, 54, 90, 30, 40,56,76]
          }
        ]
      };
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  